<template>
  <div>
    <div class="search-container">
      <el-form ref="searchRef" :inline="true">

        <el-form-item label="部门名称">
          <el-input v-model="projectName2" placeholder="请输入" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <!-- <el-button>重置</el-button> -->
        </el-form-item>
      </el-form>
    </div>
    <div class="search-container">
      <!-- <div style="display: flex;"> -->
      <!-- <el-button type="primary">新增</el-button> -->
      <!-- <el-button type="primary" style="margin-left: 20px;">删除</el-button> -->
      <!-- </div> :viewFunc="handleView" :delFunc="handleDelete" :editFunc="handleEdit"-->
      <TableCustom :columns="columns" :tableData="tableData" row-key="index" :has-pagination="false"
        :editFunc="handleEdit">
        <template #toolbarBtn>
          <el-button type="primary" @click="dialogVisible = true">新增</el-button>
        </template>
        <!-- <template #icon="{ rows }">
                    <el-icon>
                        <component :is="rows.icon"></component>
                    </el-icon>
                </template> -->
      </TableCustom>

      <el-dialog v-model="dialogVisible" title="新增">
        <el-form ref="searchRef" label-width="150">
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门名称">
                <el-input v-model="projectName11" style="width: 240px;"></el-input>
                <!-- <el-select v-model="projectName" placeholder="请选择" size="large" style="width: 240px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select> -->
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="排序">
                <el-input v-model="projectName12" style="width: 240px;"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="备注">
                <el-input v-model="projectName13" style="width: 240px;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="应用提供方">
                <el-select v-model="projectName14" placeholder="请选择" size="large" style="width: 240px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item> 
          </el-col>
          </el-row>-->
          <!-- <el-row>
            <el-col :span="12">
              <el-form-item label="操作系统">
                <el-select v-model="projectName15" placeholder="请选择" size="large" style="width: 240px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目标CPU">
                <el-select v-model="projectName16" placeholder="请选择" size="large" style="width: 240px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row> -->

        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="dialogVisible = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!-- <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
        <el-table-column type="expand">
          <template #default="props">
            <div>

              <el-table :data="tableData" border>
                <el-table-column prop="index" label="部门名称" />
                <el-table-column prop="name" label="排序" />
                <el-table-column prop="reportnum2" label="创建人" />
                <el-table-column prop="reportnum3" label="创建时间" />
                <el-table-column prop="reportnum3" label="更新时间" />
                <el-table-column prop="reportnum9" label="操作" width="200">
                  <template #default="scope">
                    <el-button type="primary" size="small">
                      编辑
                    </el-button>
                    <el-button type="primary" size="small">
                      删除
                    </el-button>

                  </template>
                </el-table-column>
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="index" label="部门名称" />
        <el-table-column prop="name" label="排序" />
        <el-table-column prop="reportnum2" label="创建人" />
        <el-table-column prop="reportnum3" label="创建时间" />
        <el-table-column prop="reportnum3" label="更新时间" />
        <el-table-column prop="reportnum9" label="操作" width="200">
          <template #default="scope">
            <el-button type="primary" size="small">
              编辑
            </el-button>
            <el-button type="primary" size="small">
              删除
            </el-button>

          </template>
        </el-table-column>
      </el-table> -->
      <div style="margin-top: 20px;margin-bottom: 20px;display: flex;justify-content: center;">
        <el-pagination background layout="prev, pager, next,jumper" :total="2" />
      </div>

      <el-dialog v-model="resultdialogVisible" title="查看结果" width="800">
        <div>
          <img src="../../assets/img/5.png" />
        </div>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="resultdialogVisible = false">取消</el-button>
            <el-button type="primary" @click="resultdialogVisible = false">
              确定
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { FormInstance } from 'element-plus';
import { Search, Refresh } from '@element-plus/icons-vue';
import { PropType, ref } from 'vue';
import TableCustom from '@/components/table-custom.vue';
import { menuData } from '@/components/menu';

let columns = ref([
  { prop: 'index', label: '部门名称', align: 'left' },
  { prop: 'reportnum', label: '排序' },
  { prop: 'reportnum2', label: '创建人' },
  { prop: 'reportnum3', label: '创建时间' },
  { prop: 'operator', label: '操作', width: 350 },
])

const resultdialogVisible = ref(false)
const projectName = ref('')
const value1 = ref('')
const projectName2 = ref('')

const handleEdit = (row) => {
  openDiagle(row)
};
const projectName11 = ref('')
const projectName12 = ref('')
const projectName13 = ref('')
const openDiagle = (item) => {
  dialogVisible.value = true;
  projectName11.value = item.index;
  projectName12.value = item.reportnum;
  projectName13.value = item.reportnum1;
}

const tableData = ref([
  {
    index: '销售部',
    name: 'A包',
    num: 'A检测',
    reportnum: '1',
    reportnum1: '测四项目',
    reportnum2: 'admin',
    reportnum3: '2022-01-19 10:37',
    reportnum4: '2022-01-19 10:37',
    reportnum5: '98%',
    reportnum6: 'admin',
    reportnum7: '2022-01-19 10:37',
    reportnum8: '晶',
    reportnum9: '晶',
    children: [
      {
        index: '销售部门1',
        name: 'A包',
        num: 'A检测',
        reportnum: '1',
        reportnum1: '测四项目',
        reportnum2: 'admin',
        reportnum3: '2022-01-19 10:37',
        reportnum4: '2022-01-19 10:37',
        reportnum5: '98%',
        reportnum6: 'admin',
        reportnum7: '2022-01-19 10:37',
        reportnum8: '晶',
        reportnum9: '晶',
      }
    ]
  },
])

const dialogVisible = ref(false)
const options = [
  {
    value: '项目1',
    label: '项目1',
  },
  {
    value: '项目2',
    label: '项目2',
  },
  {
    value: '项目3',
    label: '项目3',
  },
  {
    value: '项目4',
    label: '项目4',
  },
  {
    value: '项目5',
    label: '项目5',
  },
]
const drawer = ref(false)

const scantableData = ref([{
  index: '试剂文件',
  name1: '试剂文件1',
  name2: '80M',
  name3: '试剂',
  name4: '.dat',
  name5: '546',
  name6: '0x18',
  name7: '1.0',
  name8: '96%',
  name9: '145',
  name10: '326kB',
  name11: '2022-01-19 10:37',
  name12: '成功',
}])
</script>
<style scoped>
.search-container {
  padding: 20px 30px 0;
  background-color: #fff;
  margin-bottom: 10px;
  border: 1px solid #ddd;
  border-radius: 5px
}
</style>